<template>
  <div class="peosonResultListBox main w" style="background-color:#fff">
    <p class="peosonResultTitle">集体评价时间管理</p>
    <div class="block">
      <!-- 新增时间段 -->
      <div class="addBtnBox">
        <div class="item">
          <el-button type="success" @click="addState = true" icon="el-icon-plus">新增时间</el-button>
        </div>
      </div>
      <!-- 列表主体 -->
      <el-table
        :data="evaluateTimeList"
        border
        class="adminTimeTable"
        :header-cell-style="elementStyleObj"
      >
        <el-table-column type="index" label=" " width="50" header-align="center" align="center"></el-table-column>
        <el-table-column prop="startAt" label="评价开始日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="endAt" label="评价结束日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="resultStartShow" label="结果开放时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="resultEndShow" label="结果结束时间" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="enable"
          label="是否启用"
          width="105"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="evaluateTimeList[scope.$index].enable == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="编 辑"
          filter-placement="bottom-end"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showEditTime(scope.$index, scope.row)"
              icon="el-icon-edit"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗组件 -->
      <el-dialog title="新增评价时间" :visible.sync="addState" size="small" @close="closeDialog">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="200px"
          v-loading="addLoading"
        >
          <el-form-item label="评价开始日期" required>
            <el-col :span="18">
              <el-form-item prop="startAt">
                <el-date-picker
                  type="date"
                  placeholder="选择评价开始日期"
                  v-model="addForm.startAt"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结束日期" required>
            <el-col :span="18">
              <el-form-item prop="endAt">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结束日期"
                  v-model="addForm.endAt"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结果开始日期" required>
            <el-col :span="18">
              <el-form-item prop="resultStartShow">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结果开始日期"
                  v-model="addForm.resultStartShow"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结果结束日期" required>
            <el-col :span="18">
              <el-form-item prop="resultEndShow">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结果结束日期"
                  v-model="addForm.resultEndShow"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="addForm.enable"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="addState = false">取 消</el-button>
            <el-button type="primary" @click="addTime(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑评价时间" :visible.sync="editState" size="small" @close="closeDialog">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="200px"
          v-loading="addLoading"
        >
          <el-form-item label="评价开始日期" required>
            <el-col :span="18">
              <el-form-item prop="startAt">
                <el-date-picker
                  type="date"
                  placeholder="选择评价开始日期"
                  v-model="addForm.startAt"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结束日期" required>
            <el-col :span="18">
              <el-form-item prop="endAt">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结束日期"
                  v-model="addForm.endAt"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结果开始日期" required>
            <el-col :span="18">
              <el-form-item prop="resultStartShow">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结果开始日期"
                  v-model="addForm.resultStartShow"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="评价结果结束日期" required>
            <el-col :span="18">
              <el-form-item prop="resultEndShow">
                <el-date-picker
                  type="date"
                  placeholder="选择评价结果结束日期"
                  v-model="addForm.resultEndShow"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="addForm.enable"></el-switch>
          </el-form-item>
          <el-form-item>
            <!-- <el-button @click="editState = false">取 消</el-button> -->
            <el-button @click="cancelEditTime">取 消</el-button>
            <el-button type="primary" @click="editTime(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped>
.adminTimeTable {
  font-family: "Microsoft" !important;
  width: 96%;
  margin: 10px 2% 50px;
  -webkit-box-shadow: 0px 6px 14px #e8e8e8;
  box-shadow: 0px 6px 14px #e8e8e8;
  cursor: pointer;
}
</style>
<script>
export default {
  name: "adminTime",
  data() {
    return {
      //element 表头样式
      elementStyleObj: {
        background: "rgb(245, 249, 255) ",
        fontSize: "18px",
        color: "#434343"
      },
      evaluateTimeList: [], //表格数据
      addState: false, //新增弹窗状态
      editState: false, //编辑弹窗
      addLoading: false, //懒加载
      // 新增
      addForm: {
        enable: false,
        endAt: "",
        id: "",
        resultEndShow: "",
        resultStartShow: "",
        startAt: ""
      },
      // 表单验证
      rules: {
        startAt: [
          {
            type: "string",
            required: true,
            message: "请选择评价开始日期",
            trigger: "change"
          }
        ],
        endAt: [
          {
            type: "string",
            required: true,
            message: "请选择评价截止日期",
            trigger: "change"
          }
        ],
        resultStartShow: [
          {
            type: "string",
            required: true,
            message: "请选择评价结果开始日期",
            trigger: "change"
          }
        ],
        resultEndShow: [
          {
            type: "string",
            required: true,
            message: "请选择评价结果截止日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getEvaluateTimeList();
  },
  methods: {
    // 显示编辑页面
    showEditTime(index, data) {
      this.editState = true; //打开编辑弹窗
      this.addForm = data; //页面
    },
    // 取消编辑页面
    cancelEditTime() {
      this.editState = false;
    },
    // 监听关闭弹窗时重新加载数据
    closeDialog() {
      this.getEvaluateTimeList(); //重新加载列表
    },
    // 编辑完提交
    editTime() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          const url = "api/management/evaluateTime/update";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "修改成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.editState = false;
              this.getEvaluateTimeList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
    // 新增时间
    addTime(addForm) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          const url = "api/management/evaluateTime/insert";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "添加成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.addState = false;
              this.getEvaluateTimeList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取集体评价时间段列表
    getEvaluateTimeList() {
      const url = `api/management/evaluateTime/list`;
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.evaluateTimeList = response.data;
          // console.log("时间列表", this.evaluateTimeList);
        }
      });
    }
  }
};
</script>
